<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>效果</title>
    <script src="../jQuery/jquery-1.12.4.min%20(2).js"></script>
    <script>
        jQuery(function ($) {
            var mydiv = $('#mydiv');
            //先给div一个默认的样式，即为初始样式
            mydiv.css({
                backgroundColor:"pink",
                width:'100px',
                height:'100px',
                positiom:'absolite'
            });
            /*
              animate 动画的执行
                该方法 也就是在执行一个动画
                动画 由各个不同的外在样式在不同时间点的切换结构

                     参数abcd的意思
                     a 结束样式{}
                     b 过渡时间
                     c 动画的回调方法 function){}
                     系统对话框的执行会阻塞动画的队列

              stop 动画的停止
                 参数1
                     true:停止所有动画
                     false:停止当前还没执行完成的动画
                 参数2
                 true:省略当前未完成的动作，停止在动画结束的状态
                 false:停止在当前未完成的当前状态

                     支持坐标移动 内外边距 透明度 可以写连续多个动画
                     不支持颜色变化 不支持边框
            */
            //点击按钮div的动画效果的结束样式
            $('#mybtn').click(function () {
                mydiv.animate({width:"200px",
                               height:'200px',
                               top:'200px'},200);//200表示时间 2秒*/
            })
        })
    </script>
</head>
<body>
<button id="mybtn">开始动画</button>
<div id="mydiv"></div>
</body>
</html>